<template>
    <div class="right-content">
      <p class="title">登录记录</p>
      <el-table
      ref="logindataList"
      :data="logindataList"
      height="71%"
      :header-cell-style="{height: '7vh'}"
      :cell-style="cellStyle"
      style="width: 97%;margin: 0px auto">
      <el-table-column
          type="index"
          :index="getIndex"
          header-align="center"
          align="center"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="workId"
          header-align="center"
          align="center"
          label="员工工号">
      </el-table-column>
      <el-table-column
          prop="empName"
          header-align="center"
          align="center"
          label="员工姓名">
      </el-table-column>
      <el-table-column
          prop="ip"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          label="IP地址">
      </el-table-column>
      <el-table-column
          prop="loginTime"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          label="登录时间">
      </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div style="width: 100%; margin-top:15px" class="block">
        <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
export default {
  name: 'LoginLog',
  data() {
    return {
      activeName: 'loginlog',
      queryloginlog: '',
      logindataList: [], // 获取的登录日记数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    // this.getlogindataList()
    this.getlogindataList()
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 表格行高
    cellStyle() {
      return {
        height: '5vh',
        padding: '0'
      }
    },
    // 改变当前页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getlogindataList()
    },
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getlogindataList()
    },
    // 获取登录日志选定页码的数据
    getlogindataList() {
      this.getRequest('/common/mylog/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          console.log(resp)
          this.total = resp.total
          this.logindataList = resp.list
        }
      })
    },
    // 删除
    deleteHandle(data) {
      this.$confirm('此操作将永久删除【' + data.empName + '】员工的该条信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.deleteRequest('/log/login/' + data.id).then((resp) => {
          if (resp) {
            this.$message.success('删除成功')
            this.getlogindataList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 序号
    getIndex(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    }
  }
}
</script>

<style>
.title {
  font: 24px '宋体';
  font-weight: bolder;
  margin: 1vh 1vw 2vh;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 90% !important;
  right: 2.2%;
}
.el-pagination {
  align-items: center;
}
span:not([class*=suffix]) {
  font: 1vw '宋体' !important;
  padding-top: 0px;
}
.el-pagination__total {
  padding-top: 5px !important;
}
.el-input__inner {
  font: 1vw '宋体' !important;
}
/** 分页器 end */
</style>
